<!--
 * @Descripttion: a4页边距和套红头测试 
 * @Date: 2023-02-08 15:54:24
 * @LastEditTime: 2023-06-14 16:43:27
-->
<template>
  <div class="invitationLetter">
    <el-button type="primary" @click="createPdf">导出</el-button>
    <main id="meet-pdf-id" :class="{ pdf__output: isPdf }">
      <!-- 页头页眉 -->
      <div id="pdf-header" style="height: 3.8cm" class="pdf-hf"></div>
      <div id="pdf-footer" style="height: 3.5cm" class="pdf-hf"></div>
      <!-- 第一页页头页眉 -->
      <PdfHeader id="pdf-headerFirst" class="pdf-hf"></PdfHeader>
      <PdfFooter id="pdf-footerFirst" class="pdf-hf"></PdfFooter>

      <!-- 导出区域 -->
      <div class="main page page-one">
        <PdfHeader class="mb-20" v-if="!isPdf"></PdfHeader>
        <div class="page-inner">
          <h3 class="main__title">心里种下一颗种子达拉蹦吧啦</h3>
          <p class="main__text mt-40">种下一颗种子，爱的种子啊：</p>
          <p class="main__text text__indent pdf-group-item">
            付出真心关怀，爱的种子啊 心里念念不忘，爱的种子啊 长大了以后，幸福美满啊
            <span>2023年-6-8至2023年6-18</span
            >在广州举办。届时来自省内各地有关的相关专业医务人员约30000人将出席会议。特邀贵单位参加会议，并给予经费支持，会议将根据支持情况提供适当服务。
          </p>
          <p class="main__text text__indent pdf-group-item">
            支持款项请汇入xxxxxx指定账户，汇款时请务必在备注栏注明
            <span class="w-600">“xxxxxxx广州xxx”</span>。
          </p>
          <p class="main__text text__indent pdf-group-item">种下一颗种子，请予支持。</p>
          <p class="main__text text__indent mt-40 pdf-group-item">种下一颗种子：xxxxx</p>
          <p class="main__text text__indent pdf-group-item">种下一颗种子：xxxxxxxxxxxxxxxxxxxxx</p>
          <p class="main__text text__indent pdf-group-item">种下一颗种子：xxxxxxxxxxxxxxxxxxx广州xxxx支行</p>
          <div class="main__text flex-start pdf-group-item">
            <p class="text__indent flex-none">联系人：</p>
            <div>
              <p class="main__text">联系人:张三 xxxxxxxxxxxxxxxxxxx</p>
            </div>
          </div>
          <div class="main__footer mt-100 pdf-group-item">
            <div class="flex-column-center">
              <p class="main__text">落款名称xxxx哇呀哇呀哇呀挖</p>
              <p class="main__text">2023年6月8号</p>
            </div>
          </div>
        </div>
        <PdfFooter class="mt-20" v-if="!isPdf"></PdfFooter>
      </div>

      <!-- 分页 -->
      <div class="page-split mt-40" v-show="!isPdf"></div>

      <!-- 第二页 pdf-split-page强制分页 -->
      <div class="main page pdf-split-page">
        <h3 class="main__title w-600 pdf-group-item">第二页</h3>
        <p class="main__text mt-40 lh-40 pdf-group-item">
          <span class="w-600">比赛名称：</span>
          <span>王者荣耀挖呀挖呀挖呀挖挖呀挖呀挖挖呀挖呀</span>
        </p>
        <p class="main__text lh-40 pdf-group-item">
          <span class="w-600">时间：</span>
          <span>2023年-6-8至2023年6-18</span>
        </p>
        <p class="main__text lh-40 pdf-group-item">
          <span class="w-600">地点：</span>
          <span>广州市天河区xxxxxxxxxxxxxxxx</span>
        </p>

        <div class="main__text lh-40 mt-100">
          <span class="w-600 pdf-group-item">重要提示：</span>
          <p class="main__text text__indent pdf-group-item">
            为了保持这次活动巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉，必需严格遵守以下的规则：
          </p>
          <p class="main__text text__indent pdf-group-item">
            1、巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉属活动。
          </p>
          <p class="main__text text__indent pdf-group-item">
            2、巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉提交审批。
          </p>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { PdfLoader } from "@/utils/pdfLoader";
import PdfHeader from "@/components/Pdf/pdfHeader.vue";
import PdfFooter from "@/components/Pdf/pdfFooter.vue";

export default {
  name: "invitationLetter",
  components: {
    PdfHeader,
    PdfFooter,
  },

  data() {
    return {
      // pdf名称
      pdfName: "导出的.pdf",
      isPdf: false, // 是否生成pdf中
    };
  },

  created() {},

  methods: {
    // 生成pdf文件
    async createPdf() {
      return new Promise(async (resolve, reject) => {
        this.isPdf = true;
        await this.$nextTick();
        const pdfFooter = document.getElementById("pdf-footer");
        const pdfHeader = document.getElementById("pdf-header");
        const pdfFooterFirst = document.getElementById("pdf-footerFirst");
        const pdfHeaderFirst = document.getElementById("pdf-headerFirst");
        setTimeout(() => {
          let pdfDom = document.getElementById("meet-pdf-id");
          let pdfObj = new PdfLoader(pdfDom, {
            fileName: this.pdfName,
            // outputType: "file",
            footer: pdfFooter,
            header: pdfHeader,
            headerFirst: pdfHeaderFirst,
            footerFirst: pdfFooterFirst,
            baseY: 0,
            contentWidth: 595,
          });
          pdfObj
            .getPdf()
            .then(async (res) => {
              this.isPdf = false;
              resolve(res);
            })
            .catch((error) => {
              this.isPdf = false;
              reject(error);
            });
        });
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.invitationLetter {
  padding: 20px;
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    padding: 0;
    margin: 0;
  }

  .main {
    // width: 297mm;
    width: 210mm;
    margin: 0 auto;
    .main__title {
      color: #000;
      font-size: 29px;
      width: 97%;
      margin: 0 auto;
      font-weight: 500;
      text-align: center;
      line-height: 40px;
      font-family: "Times New Roman", "方正小标宋简体";
    }
    .main__text {
      color: #000;
      font-weight: 500;
      line-height: 34px;
      text-align: left;
      font-size: 21px;
      font-family: "Times New Roman", "仿宋_GB2312";
    }

    .main__footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }
  }
}

// 公共类，
.flex-start {
  display: flex;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.w-500 {
  font-weight: 500;
}
.w-600 {
  font-weight: 600;
}
.text__indent {
  text-indent: 2em;
}
.mt-40 {
  margin-top: 40px;
}
.mt-80 {
  margin-top: 80px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-20 {
  margin-top: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mt-100 {
  margin-top: 80px;
}
.lh-40 {
  line-height: 40px !important;
}

// a4大小 竖向
.page {
  min-height: 297mm;
  width: 210mm;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 3.8cm 2.6cm 3.5cm; /* 国家标准公文页边距 GB/T 9704-2012 */
  .page-inner {
    min-height: calc(297mm - 73mm);
  }
}

#meet-pdf-id {
  width: 210mm;
  margin: 0 auto;
}

// 第一页
.page-one {
  padding-top: 0;
  padding-bottom: 0;
  .pdf__header,
  .pdf__footer {
    padding: 0;
  }
}
.pdf-hf {
  position: fixed;
  top: -100vh;
  width: 210mm;
}
.pdf__output {
  .page {
    padding: 0 2.6cm;
  }
}
</style>
